<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="keywords" content="">
	    <meta name="description" content="">
	    <link rel="shortcut icon" type="image/png" href="" />
	    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1,minimum-scale=1,maximum-scale=1">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	    <!-- Set render engine for 360 browser 360浏览器-->
	    <meta name="renderer" content="webkit">
	    <!-- No Baidu Siteapp 百度浏览器>-->
	    <meta http-equiv="Cache-Control" content="no-siteapp" />
	    <!-- HTML5 shim for IE8 support of HTML5 elements -->
	    <!--[if lt IE 9]>
	    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	    <![endif]-->
	    <link rel="stylesheet" href="./vendors/bootstrap/css/bootstrap.css">
	    <link rel="stylesheet" href="./css/style.css">
	    <link rel="stylesheet" href="./css/index.css">
	    <link rel="stylesheet" type="text/css" href="./icon/iconfont.css">
	    <link rel="stylesheet" href="scss/waterfull.css" />
	</head>
	<body>

		<div class="header">
		    <div class="header-top">
		        <div class="container" style="position:relative" >
		
		            <img class="notice"  src="img/notice.png" alt="公告">
		            <ul class="header-top-1">
		                <li >
		                    掌握最新流行时尚与服装搭配技巧，爪子给你想要的！
		                </li>
		            </ul>
		        </div>
		    </div>
		    <div class="container header-bottom">
		        <div class="logo">
		            <img src="img/logo.png" alt="logo">
		        </div>
		        <div class="input-group">
		            <div >
		                <input type="text"  class="form-control" placeholder="请输入想要找的宝贝">
		                <span  class="input-group-addon">搜索</span>
		            </div>
		            <div class="tujian">
		                <a href="###" target="_blank">女装</a><a href="###" target="_blank">女装</a><a href="###" target="_blank">女装</a><a href="###" target="_blank">女装</a><a href="###" target="_blank">女装</a><a href="###" target="_blank">女装</a><a href="###" target="_blank">女装</a><a href="###" target="_blank">女装</a><a href="###">女装</a><a target="_blank">女装</a><a href="###" target="_blank">女装</a>
		            </div>
		            <div class="selectbox">
		                <span class="selected">搜商品</span><i class="iconfont">&#xe618;</i>
		                <ol>
		                    <li class="current" data-index="bao"><a href="#" target="_blank">商品</a></li>
		                    <li data-index="shop"><a href="#" target="_blank">店铺</a></li>
		                </ol>
		            </div>
		        </div>
		        <div class="pull-right">
		            <img src="img/ewm.png" alt="">
		        </div>
		    </div>
		
		</div>
		<div class="pb-top ">
			<div class="container">
				<h1 class="pic-title text-center">时尚图库</h1>
			</div>
		</div>
		<div id="wrapper" class="">
			<div class="container container-fall">
				<div id="waterfall">
					<div class="pin wfc wft" >
						<a href="" class="img" >
							<img src="img/ab.png" alt="" />
							
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft" >
						<a href="" class="img">
							<img src="img/cc.png" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft" >
						<a href="" class="img">
							<img src="img/ar.png" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft" >
						<a href="" class="img">
							<img src="img/9.9.jpg" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft" >
						<a href="" class="img">
							<img src="img/a-1.png" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft" >
						<a href="" class="img">
							<img src="img/beauty.png" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a></div>
					<div class="pin wfc wft">
						<a href="" class="img">
							<img src="img/ab.png" alt="" />
							
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft" >
						<a href="" class="img">
							<img src="img/ar.png" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft">
						<a href="img/donghua.png" class="img">
							<img src="img/boy.jpg" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft">
						<a href="" class="img">
							<img src="img/cloths.jpg" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft">
						<a href="" class="img">
							<img src="img/ab.png" alt="" />
							
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft" >
						<a href="" class="img">
							<img src="img/ar.png" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft">
						<a href="img/donghua.png" class="img">
							<img src="img/boy.jpg" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
					<div class="pin wfc wft">
						<a href="" class="img">
							<img src="img/cloths.jpg" alt="" />
							<p class="goods-info">初中学生长袖T恤女装秋冬体恤闺蜜少女打底衫宽松款加绒上衣</p>
						</a>
					</div>
				</div>
			</div>
		</div>
		<script src="http://www.zhuazi.com/src/vendors/jquery-1.10.2/jquery.js"></script>
		<script>
			/*
 parend 父级id
 clsName 元素class
 */
function waterFall(parent, clsName){
	var firstLeft = 0, firstTop = 0;
    var $parent = $('#'+parent);//父元素
    var $boxs = $parent.find('.'+clsName);//所有box元素
    console.log($boxs.length);
    var iPinW = $boxs.eq( 0 ).width()+10;// 一个块框box的宽
    console.log(iPinW)
    var cols = Math.ceil( $parent.width() / iPinW );//列数
    console.log(cols);

    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
//	for(var i =0; i < cols; i++) {
//		
//	}
    $boxs.each( function( index, dom){
        if( index < cols ){
        	$boxs.eq(index).css({'position': 'absolute', 'top': '0px', 'left': firstLeft});
			firstLeft = firstLeft + iPinW;
            pinHArr[ index ] = $(dom).height(); //所有列的高度
        }else{
            var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
            var minHIndex = $.inArray( minH, pinHArr );
            console.log('index'+minHIndex);
            $(dom).css({
                'position': 'absolute',
                'top': minH + 15,
                'left': $boxs.eq( minHIndex ).position().left
            });
            //添加元素后修改pinHArr
            pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高
        }
    });
}
	waterFall('waterfall', 'pin');
	window.onresize = function(){
		waterFall('waterfall', 'pin');
		
}
		</script>



	</body>
</html>